extends ../_layout

block active
  - sidebar_active = 'dashboard.html'

block content
  .content-heading
    // START Language list
    .pull-right
      .btn-group
        button.btn.btn-default(type='button', data-toggle="dropdown") English
        ul.dropdown-menu.dropdown-menu-right.animated.fadeInUpShort(role='menu')
          li
            a(href='#', data-set-lang="en") English
          li
            a(href='#', data-set-lang="es") Spanish
    // END Language list    

    | Dashboard
    small(data-localize="dashboard.WELCOME") 

  // START widgets box
  .row
    .col-lg-3.col-sm-6
      // START widget
      .panel.widget.bg-primary
        .row.row-table
          .col-xs-4.text-center.bg-primary-dark.pv-lg
            em.icon-cloud-upload.fa-3x
          .col-xs-8.pv-lg
            .h2.mt0 1700
            .text-uppercase Uploads
    .col-lg-3.col-sm-6
      // START widget
      .panel.widget.bg-purple
        .row.row-table
          .col-xs-4.text-center.bg-purple-dark.pv-lg
            em.icon-globe.fa-3x
          .col-xs-8.pv-lg
            .h2.mt0 700
              small GB
            .text-uppercase Quota
    .col-lg-3.col-md-6.col-sm-12
      // START widget
      .panel.widget.bg-green
        .row.row-table
          .col-xs-4.text-center.bg-green-dark.pv-lg
            em.icon-bubbles.fa-3x
          .col-xs-8.pv-lg
            .h2.mt0 500
            .text-uppercase Reviews
    .col-lg-3.col-md-6.col-sm-12
      // START date widget
      .panel.widget
        .row.row-table
          .col-xs-4.text-center.bg-green.pv-lg
            // See formats: https://docs.angularjs.org/api/ng/filter/date
            .text-sm(data-now="", data-format='MMMM')
            br
            .h2.mt0(data-now="", data-format="D")
          .col-xs-8.pv-lg
            .text-uppercase(data-now="", data-format='dddd')
            br
            .h2.mt0(data-now="", data-format='h:mm')
            .text-muted.text-sm(data-now="", data-format='a')
      // END date widget    
  // END widgets box

  .row
    // START dashboard main content
    .col-lg-9
      // START chart
      .row
        .col-lg-12
          // START widget
          #panelChart9.panel.panel-default.panel-demo
            .panel-heading
              //- a(href="#", data-tool="panel-dismiss", data-toggle="tooltip", title="Close Panel").pull-right
              //-   em.fa.fa-times
              a(href="#", data-tool="panel-refresh", data-toggle="tooltip", title="Refresh Panel").pull-right
                em.fa.fa-refresh
              a(href="#", data-tool="panel-collapse", data-toggle="tooltip", title="Collapse Panel").pull-right
                em.fa.fa-minus
              .panel-title Inbound visitor statistics
            .panel-body
              .chart-spline.flot-chart
          // END widget
      // END chart
      .row
        .col-lg-12
          .panel.widget
            .row.row-table
              .col-md-2.col-sm-3.col-xs-6.text-center.bg-info.pv-xl
                em.wi.wi-day-sunny.fa-4x
              .col-md-2.col-sm-3.col-xs-6.pv.br
                .h1.m0.text-bold 32&deg;
                .text-uppercase Clear
              .col-md-2.col-sm-3.hidden-xs.pv.text-center.br
                .text-info.text-sm 10 AM
                .text-muted.text-md
                  em.wi.wi-day-cloudy
                .text-info
                  em.wi.wi-sprinkles 
                  span.text-muted 20%
                .text-muted 27&deg;
              .col-md-2.col-sm-3.hidden-xs.pv.text-center.br
                .text-info.text-sm 11 AM
                .text-muted.text-md
                  em.wi.wi-day-cloudy
                .text-info
                  em.wi.wi-sprinkles 
                  span.text-muted 30%
                .text-muted 28&deg;
              .col-md-2.hidden-sm.hidden-xs.pv.text-center.br
                .text-info.text-sm 12 PM
                .text-muted.text-md
                  em.wi.wi-day-cloudy
                .text-info
                  em.wi.wi-sprinkles 
                  span.text-muted 20%
                .text-muted 30&deg;
              .col-md-2.hidden-sm.hidden-xs.pv.text-center
                .text-info.text-sm 1 PM
                .text-muted.text-md
                  em.wi.wi-day-sunny-overcast
                .text-info
                  em.wi.wi-sprinkles 
                  span.text-muted 0%
                .text-muted 30&deg;

      .row
        .col-lg-4
          // START widget
          .panel.widget
            .panel-body
              .clearfix
                h3.pull-left.text-muted.mt0 300 
                em.pull-right.text-muted.fa.fa-coffee.fa-2x
              div.pv-lg(data-sparkline="",data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color="#7266ba", data-spot-color='#888', data-min-spot-color="#7266ba", data-max-spot-color="#7266ba", data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', data-values="1,3,4,7,5,9,4,4,7,5,9,6,4", data-resize="true")
              p: small.text-muted Actual progress
              .progress.progress-xs
                .progress-bar.progress-bar-info.progress-bar-striped(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%')
                  span.sr-only 80% Complete
                  
          // END widget
        .col-lg-8
          .panel.panel-default
            .panel-heading
              .pull-right.label.label-danger 5
              .pull-right.label.label-success 12
              .panel-title Team messages
            
            // START list group
            .list-group(data-height="180", data-scrollable="")
              // START list group item
              a.list-group-item(href='#')
                .media-box
                  .pull-left
                    img.media-box-object.img-circle.thumb32(src="img/user/02.jpg", alt="Image")
                  .media-box-body.clearfix
                    small.pull-right 2h
                    strong.media-box-heading.text-primary 
                      span.circle.circle-success.circle-lg.text-left
                      | Catherine Ellis
                    p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
              // END list group item
              // START list group item
              a.list-group-item(href='#')
                .media-box
                  .pull-left
                    img.media-box-object.img-circle.thumb32(src="img/user/03.jpg", alt="Image")
                  .media-box-body.clearfix
                    small.pull-right 3h
                    strong.media-box-heading.text-primary 
                      span.circle.circle-success.circle-lg.text-left
                      | Jessica Silva
                    p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla facilisi.
              // END list group item
              // START list group item
              a.list-group-item(href='#')
                .media-box
                  .pull-left
                    img.media-box-object.img-circle.thumb32(src="img/user/09.jpg", alt="Image")
                  .media-box-body.clearfix
                    small.pull-right 4h
                    strong.media-box-heading.text-primary 
                      span.circle.circle-danger.circle-lg.text-left
                      | Jessie Wells
                    p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
              // END list group item
              // START list group item
              a.list-group-item(href='#')
                .media-box
                  .pull-left
                    img.media-box-object.img-circle.thumb32(src="img/user/12.jpg", alt="Image")
                  .media-box-body.clearfix
                    small.pull-right 1d
                    strong.media-box-heading.text-primary 
                      span.circle.circle-danger.circle-lg.text-left
                      | Rosa Burke
                    p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
              // END list group item
              // START list group item
              a.list-group-item(href='#')
                .media-box
                  .pull-left
                    img.media-box-object.img-circle.thumb32(src="img/user/10.jpg", alt="Image")
                  .media-box-body.clearfix
                    small.pull-right 2d
                    strong.media-box-heading.text-primary 
                      span.circle.circle-danger.circle-lg.text-left
                      | Michelle Lane
                    p.mb-sm: small Mauris eleifend, libero nec cursus lacinia...
              // END list group item
            // END list group
            // START panel footer
            .panel-footer.clearfix
              .input-group
                input.form-control.input-sm(type='text', placeholder='Search message ..')
                span.input-group-btn
                  button.btn.btn-default.btn-sm(type='submit')
                    i.fa.fa-search
            // END panel-footer
    // END dashboard main content

    // START dashboard sidebar
    aside.col-lg-3
      
      // START loader widget
      .panel.panel-default
        .panel-body
          a.text-muted.pull-right(href="#"): em.fa.fa-arrow-right
          .text-info Average Monthly Uploads
          canvas.center-block(data-classyloader="", data-percentage="70", data-speed="20", data-font-size="40px", data-diameter="70", data-line-color="#23b7e5", data-remaining-line-color="rgba(200,200,200,0.4)", data-line-width="10", data-rounded-line="true")
          .text-center(data-sparkline="", data-bar-color="#23b7e5", data-height="30", data-bar-width="5", data-bar-spacing="2", data-values="5,4,8,7,8,5,4,6,5,5,9,4,6,3,4,7,5,4,7")
        .panel-footer
          p.text-muted
            em.fa.fa-upload.fa-fw
            span This Month
            span.text-dark 1000 Gb
      // END loader widget

      // START messages and activity
      .panel.panel-default
        .panel-heading
          .panel-title Latest activities
        // START list group
        .list-group
          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-purple
                  em.fa.fa-cloud-upload.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 15m
                .media-box-heading
                  a(href="#").text-purple.m0 NEW FILE
                p.m0: small
                  a(href="#") Bootstrap.xls
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-info
                  em.fa.fa-file-text-o.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 2h
                .media-box-heading
                  a(href="#").text-info.m0 NEW DOCUMENT
                p.m0: small
                  a(href="#") Bootstrap.doc
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-danger
                  em.fa.fa-exclamation.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 5h
                .media-box-heading
                  a(href="#").text-danger.m0 BROADCAST
                p.m0
                  a(href="#") Read
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-success
                  em.fa.fa-clock-o.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 15h
                .media-box-heading
                  a(href="#").text-success.m0 NEW MEETING
                p.m0
                  small On 
                    em 10/12/2015 09:00 am
          // END list group item
          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-warning
                  em.fa.fa-tasks.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 1w
                .media-box-heading
                  a(href="#").text-warning.m0 TASKS COMPLETION
                .progress.progress-xs.m0
                  .progress-bar.progress-bar-warning.progress-bar-striped(role='progressbar', aria-valuenow='22', aria-valuemin='0', aria-valuemax='100', style='width: 22%')
                    span.sr-only 22% Complete

          // END list group item
        // END list group
        // START panel footer
        .panel-footer.clearfix
          a(href='#').pull-left
            small Load more
        // END panel-footer
      // END messages and activity
    // END dashboard sidebar

block vendor_css
  // WEATHER ICONS
  link(rel='stylesheet', href='../vendor/weather-icons/css/weather-icons.min.css')

block vendor_js
  // SPARKLINE
  script(src='../vendor/sparkline/index.js')
  // FLOT CHART
  script(src='../vendor/Flot/jquery.flot.js')
  script(src='../vendor/flot.tooltip/js/jquery.flot.tooltip.min.js')
  script(src='../vendor/Flot/jquery.flot.resize.js')
  script(src='../vendor/Flot/jquery.flot.pie.js')
  script(src='../vendor/Flot/jquery.flot.time.js')
  script(src='../vendor/Flot/jquery.flot.categories.js')
  script(src='../vendor/flot-spline/js/jquery.flot.spline.min.js')
  // CLASSY LOADER
  script(src='../vendor/jquery-classyloader/js/jquery.classyloader.min.js')
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // DEMO
  script(src='js/demo/demo-flot.js')
